<template>
  <transition name="toast" @after-leave="onAfterLeave">
    <div class="toast" v-if="isShow" :style="{ width: toastWidth }" :class="{ bgc: needBgc }">
      <div class="header" style="">
        <svg viewBox="64 64 896 896" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="" style="color: #3c3cff;margin-right: 5px">
          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path>
        </svg>提示</div>
      <div v-if="showCancel || props.holdOnFn" class="cancel" @click="hidden"></div>
      <div v-if="content" class="content" :style="{ textAlign }">{{ content }}</div>
      <div class="operation" >
        <a class="close" v-if="type === 'confirmAndcancel'" @click.prevent="cancelHandle">{{ cancelText }}</a>
        <a class="confirm" @click.prevent="successHandle">{{ successText }}</a>
      </div>
    </div>
  </transition>
</template>
<script setup>
import { ref, computed, nextTick } from 'vue';
const emit = defineEmits(['close']);
const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  width: {
    default: 640
  },
  textAlign: {
    type: String,
    default: 'center'
  },
  type: {
    type: String,
    default: 'confirmAndcancel'
  },
  hide: {
    type: Function
  },
  successText: {
    type: String,
    default: '确认'
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  successBtn: {
    type: Function
  },
  cancelBtn: {
    type: Function
  },
  // 是否需要右上角关闭按钮
  showCancel: {
    type: Boolean,
    default: false
  },
  // 是否需要背景
  needBgc: {
    type: Boolean,
    default: true
  },
  // 传入调用方法
  holdOnFn: {
    type: Function
  },
  // 默认点击遮罩层不关闭
  closeByOverlay: {
    type: Boolean,
    default: false
  },
  overlayNode: {
    type: Object
  }
});

// 弹窗控制
const isShow = ref(false);
// 宽度控制
const toastWidth = computed(
    () =>
        ((parseInt(props.width.toString()) / 750) * document.documentElement.clientWidth).toFixed(3) +
        'px'
);

// 显示弹窗方法
const show = () => {
  isShow.value = true;
  if (props.closeByOverlay) {
    props.overlayNode.addEventListener('click', hidden);
  }
};
// 将方法暴露出去
defineExpose({
  show
});
// 隐藏弹窗方法
const hidden = () => {
  isShow.value = false;

  if(props.hide){
    props.hide();
  }
  if (props.closeByOverlay) {
    props.overlayNode.removeEventListener('click', hidden);
  }
};

// 由于遮罩层需要消失动画，两个动画效果必须同时触发，所以关闭时直接调用hide方法
const onAfterLeave = () => {
  //   props.hide();
};

const successHandle = () => {
  if( props.successBtn){
    props.successBtn();
  }
  nextTick(() => {
    hidden();
  });
};

const cancelHandle = () => {
  if( props.cancelBtn){
    props.cancelBtn();
  }
  nextTick(() => {
    hidden();
  });
};
</script>

<style  scoped>
.toast {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  max-width: 250px;
  text-align: center;
  -moz-box-shadow:  3px 3px 3px #888888;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, .15);
}
.toast .cancel {
  background: url('./images/close-bold.png') no-repeat center / contain;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 15px;
  height: 15px;
}
.toast .cancel::before {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}
.toast .header {
   color: #757575;
  text-align: left;
}
.toast .content {
  margin-top: 15px;
  color: #757575;
}
.toast .operation {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 15px;
  border-top: 1px solid rgba(213, 213, 213, 0.5);
}/*
.toast .operation::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -10%;
  left: -50%;
  border-top: 1px solid #666;
  transform: scale(0.5);
}*/
.toast .operation .close {
  position: relative;
  width: 100%;
  padding: 10px 0;
  color: #777777;
}
.toast .operation .close::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  border-right: 1px solid rgba(213, 213, 213, 0.6);
  transform: scale(0.5);
}
.toast .operation .confirm {
  width: 100%;
  padding: 10px 0;
  color: #3c3cff;
}
.bgc {
  background: #fff;
  border-radius: 10px;
  padding: 10px 10px 0;
}
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease-out;
}
.toast-enter-from,
.toast-leave-to {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
}
</style>